<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>群星网约车</title>
  <link rel="icon" href="../image/carMR.png" type="image/png">
  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
  <style>
    #app {
      padding: 20px;
    }
    .chart {
      width: 100%;
      height: 400px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
<div id="app">
  <div id="order-chart" class="chart"></div>
  <div id="type-chart" class="chart"></div>
  <div id="color-chart" class="chart"></div>
</div>

<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script>
  // request拦截器，将用户token放入头中
  axios.interceptors.request.use(
          config => {
            let token = localStorage.getItem("token"); // 确保 token 正确存储在 localStorage 中
            if (token) {
              config.headers['token'] = token;
            }
            return config;
          },
          error => {
            console.log(error);
            return Promise.reject(error);
          }
  );
  new Vue({
    el: '#app',
    data() {
      return {
        orderData: [],
        typeData: [],
        colorData: []
      }
    },
    mounted() {
      this.fetchData();
    },
    methods: {
      fetchData() {
        axios.get('/order/orders/order-statistics')
          .then(response => {
            const data = response.data;
            this.orderData = data.orderCounts;
            this.typeData = data.vehicleTypeCounts;
            this.colorData = data.colorCounts;
            this.renderOrderChart();
            this.renderTypeChart();
            this.renderColorChart();
          });
      },
      renderOrderChart() {
        const orderChart = echarts.init(document.getElementById('order-chart'));
        const orderOption = {
          title: {
            text: '订单数量统计（每月）'
          },
          tooltip: {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: this.orderData.map(item => item.month)
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.orderData.map(item => item.count),
            type: 'line'
          }]
        };
        orderChart.setOption(orderOption);
      },
      renderTypeChart() {
        const typeChart = echarts.init(document.getElementById('type-chart'));
        const typeOption = {
          title: {
            text: '打车类型数量统计（每月）'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['经济型', '舒适型', '豪华型', '大型', '绿色环保型']
          },
          xAxis: {
            type: 'category',
            data: [...new Set(this.typeData.map(item => item.month))]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '经济型',
              data: this.typeData.filter(item => item.vehicle_type === '经济型').map(item => item.count),
              type: 'line'
            },
            {
              name: '舒适型',
              data: this.typeData.filter(item => item.vehicle_type === '舒适型').map(item => item.count),
              type: 'line'
            },
            {
              name: '豪华型',
              data: this.typeData.filter(item => item.vehicle_type === '豪华型').map(item => item.count),
              type: 'line'
            },
            {
              name: '大型',
              data: this.typeData.filter(item => item.vehicle_type === '大型').map(item => item.count),
              type: 'line'
            },
            {
              name: '绿色环保型',
              data: this.typeData.filter(item => item.vehicle_type === '绿色环保型').map(item => item.count),
              type: 'line'
            }
          ]
        };
        typeChart.setOption(typeOption);
      },
      renderColorChart() {
        const colorChart = echarts.init(document.getElementById('color-chart'));
        const colorOption = {
          title: {
            text: '打车颜色数量统计（每月）'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['白色', '黑色', '银灰色', '蓝色', '红色', '青绿色', '金色']
          },
          xAxis: {
            type: 'category',
            data: [...new Set(this.colorData.map(item => item.month))]
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '白色',
              data: this.colorData.filter(item => item.color === '白色').map(item => item.count),
              type: 'line'
            },
            {
              name: '黑色',
              data: this.colorData.filter(item => item.color === '黑色').map(item => item.count),
              type: 'line'
            },
            {
              name: '银灰色',
              data: this.colorData.filter(item => item.color === '银灰色').map(item => item.count),
              type: 'line'
            },
            {
              name: '蓝色',
              data: this.colorData.filter(item => item.color === '蓝色').map(item => item.count),
              type: 'line'
            },
            {
              name: '红色',
              data: this.colorData.filter(item => item.color === '红色').map(item => item.count),
              type: 'line'
            },
            {
              name: '青绿色',
              data: this.colorData.filter(item => item.color === '青绿色').map(item => item.count),
              type: 'line'
            },
            {
              name: '金色',
              data: this.colorData.filter(item => item.color === '金色').map(item => item.count),
              type: 'line'
            }
          ]
        };
        colorChart.setOption(colorOption);
      }
    }
  });
</script>
</body>
</html>
